<template>
  <page-header-wrapper>
    <template #content>
      <p style='border-left: 2px solid #20a4fa;padding-left: 10px;'> 仅展示自己设置的题目 </p>
    </template>
    
    
    <a-card v-if='!showUpdate'>
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='48'>
            <a-col :md='8' :sm='24'>
              <a-form-item label='题目名称'>
                <a-input v-model='queryParam.title' placeholder='请输入操作名称或关键字' />
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-form-item label='操作类型'>
                <a-select v-model='queryParam.level' placeholder='请选择操作类型'>
                  <a-select-option value='0'>简单</a-select-option>
                  <a-select-option value='1'>中等</a-select-option>
                  <a-select-option value='2'>困难</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-button type='primary' @click='getAuthorTopicList'>查询</a-button>
              <a-button style='margin-left: 8px' @click='() => this.queryParam = {}'>重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      
      <a-table :columns='columns'
               bordered
               rowKey='topicId'
               :loading='loading'
               :pagination='pagination'
               :data-source='data'
               @change='handleTableChange'
               class='question-list'>
        
        <!--难度-->
        <span
          slot='level'
          slot-scope='level'>
        <a-tag
          :color='getTagColor(level)'>
          {{ level === '0' ? '简单' : level === '1' ? '中等' : level === '2' ? '困难' : '未知难度' }}
        </a-tag>
      </span>
        <!--标签-->
        <span
          slot='tags'
          slot-scope='tags'>
          <a-space>
            <a-button size='small' v-for='tag in tags' :key='tag'>
              {{ tag }}
            </a-button>
          </a-space>
        </span>
        
        <span
          slot='action'
          slot-scope='text, record'>
         
         <a-button
           style='border-radius: 10px'
           type='primary'
           @click='goToUpdateTopic(text,record)'>
          修改题目
        </a-button>
        
           <a-popconfirm
             title='确认删除'
             ok-text='确认'
             cancel-text='取消'
             @confirm='delTopic(text,record)'
             @cancel='() => {}'
           >
        <a-button
          style='border-radius: 10px;margin-left: 10px;'>
          删除题目
        </a-button>
  </a-popconfirm>

      </span>
      
      </a-table>
    </a-card>
    
    <a-card v-else>
      <step1 :form-data='formData' mode='update' @updateTopic='updateTopic' />
    </a-card>
  
  </page-header-wrapper>
</template>

<script>
import { delMySetTopic, getAuthorTopicList, updateMySetTopic } from '@/api/adminTopic'
import Step1 from '@/views/topic/Step1.vue'
import { getTopicDetail } from '@/api/newcomerTopic'
import { setTimeout } from 'core-js/internals/schedulers-fix'

const columns = [
  {
    title: '题目名称',
    dataIndex: 'title',
    width: 450,
    scopedSlots: { customRender: 'title' }
  },
  {
    title: '难度',
    dataIndex: 'level',
    defaultSortOrder: 'ascend',
    scopedSlots: { customRender: 'level' },
    sorter: (a, b) => a.level - b.level
  },
  {
    title: '标签',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 250,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'UpdateTopic',
  components: { Step1 },
  data() {
    return {
      // 表格数据
      data: [],
      // 列数据
      columns,
      loading: false,
      showUpdate: false,
      // 查询参数
      queryParam: {},
      // 分页参数
      pagination: {
        size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '15', '20'],//可选的页面显示条数
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        }, //展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true //是否可以改变pageSize
      },
      formData: {}
    }
  },
  created() {
    this.getAuthorTopicList()
  },
  methods: {
    getTagColor(level) {
      switch (level) {
        case '0':
          return 'green'
        case '1':
          return 'orange'
        case '2':
          return 'red'
        default:
          return 'blue'
      }
    },
    getAuthorTopicList() {
      this.loading = true
      getAuthorTopicList(this.queryParam).then(response => {
        this.data = response.rows
        this.pagination.total = response.total
      })
      this.loading = false
    },
    //表格改变时触发
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      // 添加分页参数
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      
      this.getAuthorTopicList()
    },
    goToUpdateTopic(text, record) {
      // 发送请求获取设置过的题目数据
      getTopicDetail(record.topicId).then(response => {
        this.formData = response.data
        this.showUpdate = true
      })
    },
    updateTopic(values) {
      updateMySetTopic(values).then(() => {
        this.$message.success('更新成功')
        this.getAuthorTopicList()
        setTimeout(() => {
          this.showUpdate = false
        }, 1200)
      })
    },
    delTopic(text, record) {
      delMySetTopic(record.topicId).then(() => {
        this.$message.success('删除成功')
        this.getAuthorTopicList()
      })
    }
  }
}
</script>

<style scoped>

</style>